<template>
  <view class="assess">
    <view class="navs">
      <navigator
        url="/packageA/order/index"
        open-type="navigate"
        hover-class="none"
      >
        <u-icon name="arrow-leftward"></u-icon>
      </navigator>
      <view class="sear"> 新农人农庄</view>
    </view>
    <view class="rate">
      <u-rate
        active-color="#FFAA1A"
        inactive-color="#dbdee4"
        gutter="30"
        v-model="value"
        @change="changeCon1($event, 'value')"
      >
      </u-rate>
      <text>{{ rateContent }}</text>
    </view>
    <view class="rate-dtl" v-if="isShow">
      <view class="line">
        <view>品质</view>
        <u-rate
          active-color="#FFAA1A"
          inactive-color="#dbdee4"
          gutter="30"
          v-model="value1"
          @change="changeCon($event, 'value1')"
          :touchable="false"
        >
        </u-rate>
        <text>{{ rateContent1 }}</text>
      </view>
      <view class="line">
        <view>服务</view>
        <u-rate
          active-color="#FFAA1A"
          inactive-color="#dbdee4"
          gutter="30"
          v-model="value2"
          @change="changeCon($event, 'value2')"
          :touchable="false"
        >
        </u-rate>
        <text>{{ rateContent2 }}</text>
      </view>
      <view class="line">
        <view>性价比</view>
        <u-rate
          active-color="#FFAA1A"
          inactive-color="#dbdee4"
          gutter="30"
          v-model="value3"
          @change="changeCon($event, 'value3')"
          :touchable="false"
        >
        </u-rate>
        <text>{{ rateContent3 }}</text>
      </view>
      <view class="line">
        <view>环境</view>
        <u-rate
          active-color="#FFAA1A"
          inactive-color="#dbdee4"
          gutter="30"
          v-model="value4"
          @change="changeCon($event, 'value4')"
          :touchable="false"
        >
        </u-rate>
        <text>{{ rateContent4 }}</text>
      </view>
    </view>
    <view class="pj">
      <text class="tt">留下你的评价</text>
      <u--textarea
        v-model="value5"
        placeholder="请输入内容"
        border="none"
        height="250rpx"
      ></u--textarea>
    </view>
    <view class="upd">
      <view>
        <u-upload
          :fileList="fileList1"
          @afterRead="afterRead"
          @delete="deletePic"
          name="1"
          multiple
          :maxCount="1"
        >
          <view class="pho">
            <image
              src="/static/pho.jpg"
              mode="widthFix"
              style="width: 25px; height: 25px"
            ></image>
            <text>上传图片</text>
          </view>
        </u-upload>
      </view>
      <view
        ><u-upload
          :fileList="fileList2"
          @afterRead="afterRead"
          @delete="deletePic"
          name="2"
          multiple
          :maxCount="1"
          accept="video"
        >
          <view class="pho">
            <image
              src="/static/video.jpg"
              mode="widthFix"
              style="width: 25px; height: 25px"
            ></image>
            <text>上传视频</text>
          </view>
        </u-upload>
      </view>
    </view>
    <view class="cell">
      <u-cell-group>
        <u-cell title="人均价格" value="内容" center>
          <view slot="value" class="u-slot-value">
            <u--input
              placeholder="¥ 请输入价格"
              border="none"
              v-model="price"
            ></u--input>
          </view>
        </u-cell>
        <u-cell title="匿名评价" value="内容" center>
          <view slot="value" class="u-slot-value">
            <u-switch
              v-model="isNm"
              activeColor="#c3162f"
              asyncChange
              @change="asyncChange"
            >
            </u-switch>
          </view>
        </u-cell>
      </u-cell-group>
    </view>
    <view class="tj">
      <u-button
        type="primary"
        color="#ffaa19"
        shape="circle"
        text="提交"
        @click="goConfirm"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: "assess",
  components: {},
  data: () => ({
    value: 0,
    value5: "",
    fileList1: [],
    fileList2: [],
    price: "",
    isNm: false,
    value1: 0,
    value2: 0,
    value3: 0,
    value4: 0,
    rateContent: "", // 评价内容
    rateContent1: "", // 评价内容
    rateContent2: "", // 评价内容
    rateContent3: "", // 评价内容
    rateContent4: "", // 评价内容
    isShow: false,
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    goConfirm() {
      console.log(444);
      uni.showModal({
        confirmText: "继续评价", //确认按钮的文字
        cancelText: "保存离开", //取消按钮的文字
        confirmColor: "#ff0000", //确认按钮文字颜色
        cancelColor: "#000", //取消按钮文字颜色
        content: "确定要离开吗？大家都很需要您的宝贵评价呢！！",
        success: (res) => {
          console.log(res, "res");
          if (res.confirm) {
            console.log("用户点击确定");
            // uni.navigateTo({
            //   url: "/packageA/order/index",
            // });
          } else if (res.cancel) {
            //点击取消之后执行的代码
            console.log("用户点击取消");
            uni.navigateTo({
              url: "/packageA/order/assess/confirm",
            });
          }
        },
      });
    },
    rateTxt(e) {
      switch (e) {
        case 1:
          return "很糟";
        case 2:
          return "较差";
        case 3:
          return "一般";
        case 4:
          return "还行";
        case 5:
          return "超赞";
        default:
          return "很糟";
      }
    },
    changeCon(e, type) {
      switch (type) {
        case "value1":
          this.value1 = e;
          this.rateContent1 = this.rateTxt(e);
          break;
        case "value2":
          this.value2 = e;
          this.rateContent2 = this.rateTxt(e);
          break;
        case "value3":
          this.value3 = e;
          this.rateContent3 = this.rateTxt(e);
          break;
        case "value4":
          this.value4 = e;
          this.rateContent4 = this.rateTxt(e);
          break;
        case "value":
          this.value = e;
          this.rateContent = this.rateTxt(e);
          break;
        default:
          break;
      }
    },
    changeCon1(e, type) {
      this.changeCon(e, type);
      this.isShow = true;
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
          },
        });
      });
    },
    asyncChange(e) {
      console.log(e, "匿名");
      uni.showModal({
        confirmText: "暂不匿名", //确认按钮的文字
        cancelText: "确认匿名", //取消按钮的文字
        confirmColor: "#000", //确认按钮文字颜色
        cancelColor: "#ff0000", //取消按钮文字颜色
        content:
          "为避免个人信息泄露，请确保您所上传的信息中没有可以确认身份的内容",
        success: (res) => {
          console.log(res, "res");
          if (res.confirm) {
            console.log("用户点击确定");
          } else if (res.cancel) {
            //点击取消之后执行的代码
            console.log("用户点击取消");
            //点击确定匿名之后执行的代码
            this.isNm = true;
          }
        },
      });
    },
  },
  options: { styleIsolation: "shared" },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.assess {
  font-family: "Poppins";
  background-color: #f9f9f9;
  padding-bottom: 40rpx;
  font-size: 26rpx;
  position: absolute;
  width: 100%;
  height: 100%;
  .navs {
    padding-top: 140rpx !important;
    display: flex;
    align-items: center;
    margin-left: 5%;
    .sear {
      margin-left: 33%;
    }
  }
  .rate {
    margin: 40rpx 0 20rpx 0;
    display: flex;
    justify-content: center;
    .rate ::v-deep .uicon-star {
      background: white !important;
      border-radius: 6rpx;
      margin: 20rpx;
      width: 8rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .rate-dtl {
    margin-bottom: 100rpx;
    .line {
      display: flex;
      // justify-content: center;
      align-items: center;
      margin-left: 8%;
      padding: 10rpx;
      view {
        width: 100rpx;
      }
    }
  }
  .pj {
    border: 1px solid #979797;
    margin: 40rpx auto;
    width: 90%;
    border-radius: 15rpx;
    height: 320rpx;
    position: relative;
    .tt {
      position: absolute;
      top: -10px;
      left: 5%;
      background: #f8f8f8;
      padding: 0 10rpx;
      color: #808080;
    }
    ::v-deep .u-textarea {
      margin-top: 30rpx;
      background: #f8f8f8;
    }
  }
  .upd {
    display: flex;
    justify-content: space-between;
    margin: 40rpx 5%;
    .pho {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 300rpx;
      height: 200rpx;
      border-radius: 10rpx;
      background: #d8d8d8;
      margin: 10rpx;
      text {
        margin-top: 10rpx;
        // font-size: 28rpx;
      }
    }
  }
  .cell {
    width: 90%;
    margin: 0 auto;
    ::v-deep .u-cell__title-text {
      font-size: 28rpx;
    }
    // ::v-deep .u-switch,
    // ::v-deep .u-switch__node {
    //   border: 1px solid #000 !important;
    // }
  }
  .tj {
    width: 90%;
    margin: 100rpx auto;
  }
}
</style>